<template>
 <div class="container" >
    <div class="borx">
        <div v-for="(item,index) in nameList" v-bind:key="item">
           index: {{ index }} item:{{ item }}
        </div>
    </div>

    <div class="borx">
        <div v-for="(item,index) in studentList" v-bind:key="item">
           index: {{ index }} item:{{ item.name }} age:{{ item.age }}
        </div>
    </div>

    <div class="borx">
        <div v-for="(count) in 100" v-bind:key="count">
          conut:{{ count }}
        </div>
    </div>
 </div>
</template>
<script>
 export default {
 name: '',
 data: function(){
 return {
    nameList:['张三','李四','王五','狗蛋','傻妞'],
    studentList:[
        {
            name:"张三",
            age:18
        },
        {
            name:"李四",
            age:19
        },
        {
            name:"王五",
            age:25
        },
        {
            name:"狗蛋",
            age:24
        },
        {
            name:"傻妞",
            age:22
        },
        
    ]
 }
 },
 methods:{
 }
 }
</script>
<style>
html,
 body, 
 #app{
 height: 100%;
 }
</style>
<style scoped>
 .container {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 background-color: aliceblue;
 }
 .tr{
 width: 200px;
 flex-basis: 50px;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 background-color: beige;
 align-items: center;
 }
 .second{
 background-color: aqua;
 }
 .borx{
    width: 300px;
    height: 100px;
    overflow: auto;
    border: 1px solid #FF00F0;
    margin: 10px;
 }
</style>